<template>
    <div>
        <div class="inner">
        <div>
            <!-- 主页头部搜索 -->
            <div class="topbox">
                <van-icon name="plus" size=".3rem"/>
                <van-search placeholder="请输入搜索关键词" v-model="inputvalue" class="search"/>
                <van-icon name="bell" color="#EE87B6" size=".3rem"/>
            </div>
            <!-- 轮播图 -->
            <div class="lb">
               <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                    <img v-lazy="image" />
                </van-swipe-item>
                </van-swipe>
            </div>
            <!-- 四个图标跳转 -->
            <div class="fouricons">
                <div>
                    <img src="../../public/img/tx/x1.png" alt="">
                    <span>新手指南</span>
                </div>
                <div @click="hbbk()">
                    <img src="../../public/img/tx/x2.png" alt="">
                    <span>烘焙百科</span>
                </div>
                <div>
                    <img src="../../public/img/tx/x3.png" alt="">
                    <span>每日签到</span>
                </div>
                <div @click="spfl">
                    <img src="../../public/img/tx/x4.png" alt="">
                    <span>食谱分类</span>
                </div>
            </div>
            <!-- tab页面--主页食品分类展示 -->
                <TabPage></TabPage>
        </div>
        </div>
        
        <div>
            <BottomBar></BottomBar> 
        </div>       
    </div>
</template>
<script>
import BottomBar from '../components/bottombar.vue'
import TabPage from '../components/main/tabPage.vue'
export default {
    components:{
        BottomBar,TabPage
    },
    data(){
        return{
            inputvalue:"",
            images: [
                'img/lb/lb01.jpg',
                'img/lb/lb02.jpg',
                'img/lb/lb03.jpg',
                'img/lb/lb04.jpg',
                ],
        }
       
    },
    methods:{
        hbbk(){
            this.$router.push({
                path:"/hbbk"
            })
        },
         spfl(){
            this.$router.push({
                path:"/spfl"
            })
        }
    }
}
</script>
<style scoped>
.inner{width: 90%;margin:  0 auto}
.topbox{display: flex;justify-content: space-between;align-items: center}
.search{width: 3rem}
.van-swipe{height: 2.1rem;}
.lb img{width: 100%}
.fouricons{display: flex;justify-content: space-between}
.fouricons div{display: flex;flex-direction: column;align-items: center}
.fouricons div span{margin-top: .08rem;color: #333}
</style>